import React, { Component } from 'react'
import './index.scss'
import { navBarRoutes } from '../../router/routes'
import {countTotalNum} from '../../store/actionCreator'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
 class Footer extends Component {
  render() {
    const {history,location}=this.props
    return (
      < div className = 'footer' >
         {
        navBarRoutes.map(v=>(
          <div className="footer-item" id={location.pathname===v.path?'active':''} key={v.title}  onClick={()=>{history.push(v.path)}}>
          <span className={v.icon}> { v.title==='购物车'?<span className='m-badge'>{this.props.totalNum?this.props.totalNum:''}</span>:null}</span>
        <div className="footer-item-tit">{v.title} </div>
        </div>
        ))
      } 
      </div >
    )
  }
  componentDidMount(){
   let CartList=JSON.parse(window.localStorage.getItem('CartList'))||[];
  this.props.countTotal(CartList)
  }
}
const mapStateToProps=(state)=>{
  return{
    totalNum: state.getIn(['productReducer', 'totalNum']),
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    /* 计算购物总数开始 */
    countTotal:(arr)=>{
      var num=0
      arr.forEach(v=>{
        num+=v.num
      })
      dispatch(countTotalNum(num))
    }

    /* 计算购物总数结束 */
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Footer))